<template>
  <div class="phtotinfo-container">
    <h3>{{ photoinfo.title }}</h3>
    <p>
      <span>发表时间:{{photoinfo.add_item | dateFormat }}</span>
      <span>点击：{{ photoinfo.click }}次</span>
    </p>


    <hr>
    <!-- 缩略图区域 -->
    <vue-preview :slides="slide1" @close="getThumbs"></vue-preview>
    <!-- 图片内容区域 -->
    <div class="content" v-html="photoinfo.content"></div>

    <!-- 放置一个现成的评论子组件 -->
    <cmt-box :id="id"></cmt-box>
  </div>
</template>
<script>
// 导入评论子组件
import comment from '../subcomponents/comment.vue'
export default {
  data(){
    return{
      id:this.$route.params.id,//从路由中获取到的图片di
      photoinfo:{},//图片详情
      slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
    }
  },
  created(){
    this.getPhotoInfo();
    this.getThumbs();
  },
  methods:{
    getPhotoInfo(){
      //获取图片的详情
      this.$http.get('api/getimageInfo/'+this.id).then(result =>{
        if(result.body.status === 0){
          this.photoinfo = result.body.message[0]
        }
      });
    },
    getThumbs(){
      this.$http.get('api/getthumimages/'+ this.id).then( result =>{
        if(result.body.status === 0){
          //循环每个图片的数据，补全图片的宽和高
          result.body.message.forEach(item => {
            item.w = 600
            item.h = 400
          });
          this.slide1 = result.body.message
        }
      })
    }
  },
  components:{
    //注册评论子组件
    'cmt-box':comment
  },
}
</script>
<style lang="scss" scoped>
  .phtotinfo-container{
    padding: 3px;
    h3{
      color: #26A2FF;
      font-size: 15px;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle{
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }
    .content{
      font-size: 13px;
      line-height: 30px;
    }
  }
</style>

